<template>
  <div class="TabsWrap" v-if="promptSetting!=null">
    <div class="TabsWrapContent">
      <div class="Tabs">
        <template v-for="(selecter, index) in promptSetting.sessionList" :v-key="index">
          <div :class="'tab'+ (nowTab == index?' hover':'')"  @click="nowTab = index">{{ selecter.title }}</div>
        </template>
      </div>
      <div class="TabContent">
        <div class="item" v-for="(item, index) in promptSetting.sessionList[nowTab].option">
          <div class="title">{{ item.name }}</div>
          <div class="txt">{{ item.prompt }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.TabsWrap{width:100%; height:100%; box-sizing:border-box; padding: 20px;}
.TabsWrapContent{ border-radius:20px; background:#fff; font-size: 16px; color:#333; height: 100%; box-sizing:border-box; overflow:hidden; display:flex; }
.Tabs{ border-bottom: 1px solid #eee; text-align: left; overflow: hidden; background: #eee; padding:18px; height:100%; overflow-y:auto; width: 180px;}
.Tabs .tab{  display: block; line-height:20px; padding: 12px 18px; margin:12px; float: left; clear: both; }
.Tabs .tab.hover{background: #21213c; color:#fff; border-radius:20px;}

.TabContent{ padding:18px; flex:1; overflow-y:auto;}
.TabContent .item{ width: 50%; float:left; display:flex;  padding:8px 12px; line-height:16px; text-align:left; box-sizing:border-box;}
.TabContent .item .title{ width: 120px; }
.TabContent .item .txt{ color:#999; flex:1;}
</style>

<script>
import SideBar from '../components/layout/side_bar.vue'
import WebRequest from '../unit/request.js'
export default {
  name: 'PromptList',
  components: {  },
  data () {
    return {
      promptSetting:null,
      isLoadingPrompt:false,
      nowTab:0
    }
  },
  mounted(){
    if(this.promptSetting == null && !this.isLoadingPrompt)
    this.isLoadingPrompt = true
    WebRequest.GetSelecterSetting({
      callback: (res) => {
        if(res.status == 200 && res.data.errCode == 10000){
          this.promptSetting = JSON.parse(res.data.data)
          console.log(this.promptSetting)
        }else{
          this.promptSetting = null
          this.isLoadingPrompt = false
        }
      }
    })
  },
  methods: {
  }
}
</script>

